<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <Input
          placeholder="家庭名称"
          v-model="bloc.form.familyname"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          v-if="Validation.isRootCompany"
          placeholder="创建者手机号"
          v-model="bloc.form.phone"
          style="width: 180px; margin-right: 10px"
        />
        <DatePicker
          type="daterange"
          placeholder="添加时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.created"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
        >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"

      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
<!--            <Button-->
<!--              size="small"-->
<!--              @click="modifyItem(row)"-->
<!--              type="info"-->
<!--              v-if="Validation.check(Resources.MEMBER_UPDATE)"-->
<!--            >-->
<!--              编辑-->
<!--            </Button>-->
            <Button
              size="small"
              type="info"
              @click="$router.push(`/family/detail/${row.familyId}`)"
              v-if="Validation.check(Resources.AFFILIATE_LIST)"
            >
              成员列表
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { ListBloc } from '@/view/family/ListBloc';
    import { Family } from '@/base/model/Family';
    import { formatDate } from '@/base/util/Dates';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';
    import { isEmpty } from '@/base/util/Strings';


    const columns = (bloc: ListBloc) => [
        {
            title: '家庭名称',
            key: 'familyName',
            align: 'left',
            minWidth: 120,
            tooltip: true
        },
        {
            title: '创建者',
            key: 'nickname',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.nickname === null ? '' : params.row.nickname
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '创建者手机号',
            key: 'phone',
            align: 'left',
            minWidth: 120,
            tooltip: true
        },
        {
            title: '创建时间',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: formatDate(
                            new Date(params.row.created),
                            'yyyy-MM-dd hh:mm:ss'
                        )
                    }
                });
            },
            width: 160,
            align: 'left',
            tooltip: true
        },
        {
            title: '操作',
            slot: 'action',
            width: 47 * 2 + 75 + 20,
            align: 'left',
            fixed: 'right'
        }
    ];

    @Component({
        components: {}
    })
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc.form.phone = vm.phonex;
                vm.bloc
                    .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                    .catch((e) => {
                        vm.$Message.error('操作错误');
                    });
            });
        }

        get phonex() {
            return this.$route.params.phone==undefined?'':Number(this.$route.params.phone);
        }

        bloc: ListBloc = new ListBloc();
        columns = columns(this.bloc);
        Validation = Validation;
        Resources = Resources;

        // removeItem(dataItem: Family) {
        //     this.$Modal.confirm({
        //         title: "提示",
        //         content: "确认删除后将无法恢复！还要继续吗？",
        //         okText: "删除",
        //         cancelText: "取消",
        //         onOk: () => {
        //             this.bloc
        //                 .removeItem(dataItem)
        //                 .then((value) => {
        //                     this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
        //                 })
        //                 .then(() => {
        //                     this.$Message.success("删除成功");
        //                 })
        //                 .catch((e) => {
        //                     this.$Message.error("删除失败");
        //                 });
        //         },
        //     });
        // }

        // modifyItem(dataItem: Member) {
        //     this.$router.replace(`/member/${dataItem.id}`);
        // }
        //
        // newsPush() {
        //     if (isEmpty(this.bloc.memberSelectArr)) {
        //         this.$Message.error("请选择至少一个会员");
        //         return false;
        //     }
        //     sessionStorage.setItem(
        //         "MEMBER_INFO",
        //         JSON.stringify(this.bloc.memberSelectArr)
        //     );
        //     this.$router.replace("/news/add");
        // }
        //
        // onSelectChange(selection) {
        //     this.bloc.memberSelectArr = selection;
        //     console.log(123, selection);
        // }
    }
</script>

<style lang="less">
</style>
